<template>
  <common-edit-dialog
    :visible.sync="configureOpen"
    @cancel="configureOpen = false"
    @submit="configureConfirm"
    :title="title"
  >
    <div class="right-content">
      <el-dropdown
        size="small"
        split-button
        type="primary"
        @command="toogleItem"
      >
        <span @click="toogleItem(AndORLabel === '或' ? 'OR' : 'AND')"
          >添加条件({{ AndORLabel }})</span
        >
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="AND">且条件</el-dropdown-item>
          <el-dropdown-item command="OR">或条件</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="condition-generator">
        <QueryGenerator :relations="relations" ref="generator" />
      </div>
    </div>
  </common-edit-dialog>
</template>

<script>
import QueryGenerator from "@/views/analysisCenter/log/QueryGenerator/index.vue";
import { deepClone } from "@/utils/index";
import { generateSqlString, generateSqlObj, generateTuple } from "@/utils/util";
import { mapState } from "vuex";
export default {
  name: "Configure",
  components: { QueryGenerator },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      relations: ["OR", [{ fieldName: "", operator: "EQ", value: "" }]],
      AndORLabel: "且",
      oldRelations: [],
      configureOpen: false,
      currentWhich: "",
    };
  },
  computed: {
    ...mapState("log", ["operatorList"]),
    ...mapState("rule", ["typeSearchList"]),
  },
  mounted() {},
  methods: {
    show(param, condition) {
      this.configureOpen = true;
      this.currentWhich = param;
      if (condition) {
        this.relations = generateTuple(condition);
      } else {
        this.relations = [
          "OR",
          [
            {
              fieldName: this.typeSearchList[0].columnName,
              operator: this.operatorList[0].paramValue,
              value: "",
            },
          ],
        ];
      }
    },
    toogleItem(val) {
      this.AndORLabel = val === "AND" ? "且" : "或";

      this.oldRelations = deepClone(this.relations);
      this.$nextTick(() => {
        this.$refs.generator.createRelation(val, this.oldRelations);
      });
      console.log(this.relations);
    },

    //过滤规则配置页 确定
    configureConfirm() {
      let stringCondition = generateSqlString(this.relations);
      let objCondition = generateSqlObj(this.relations);

      if (!objCondition) {
        this.$message.warning("请输入字段值");
        return;
      } else {
        this.configureOpen = false;
      }

      this.$emit(
        "getCondition",
        stringCondition,
        objCondition,
        this.currentWhich
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.condition-generator {
  margin: 10px 0;
}
</style>